<template>
	<view class="">
		 
		<view class="content" :style="[{height:'calc(100vh - 0rpx  )'}]">
		<scroll-view scroll-y class="left-aside">
			<view class="f-item b-b" :class="{active: 0 == currentId}" @click="tabtap(0)">
				全部分类
			</view>
			<view v-for="(item,i) in flist" :key="item.id" class="f-item b-b" :class="{active: item.id == currentId}" @click="tabtap(item,i)">
				{{item.title}}
			</view>
		</scroll-view>
		<scroll-view scroll-y class="right-aside" @scrolltolower="scrolltolower" :scroll-top="scrollTop" @scroll="scroll">
			<scroll-view scroll-x class="bg-white nav " scroll-with-animation :scroll-left="scrollLeft" v-if="currentId>0">
				<view class="cu-item" :class="index==-1?'text-green cur':''"   @tap="tabSelect" :data-id="-1" >
					<text class="ft14 ftw200 " style="color: black;" :class="-1==TabCur?'text-green cur':''" >全部</text>
				</view>
				<view class="cu-item" :class="index==TabCur?'text-green cur':''" 
				v-for="(item,index) in slist" :key="index" @tap="tabSelect" :data-id="index" :data-e="item.id">
					<text class="ft14 ftw200 cl-notice" :class="index==TabCur?'text-green cur':''" >{{item.title}}</text>
				</view>
			</scroll-view> 
			<view class="t-list" v-if="rows.length>0">
					<block v-for="(value,index) in rows" :key="index">
					<view class="box pd10_10 flex  mb10" style="position: relative;" >
						<image @tap="detail(value.id)" class="integral-tuan-l" mode="aspectFill" :src="value.img"></image>
						<view class="pl10" style="width: calc(100% - 200rpx);">
							<view @tap="detail(value.id)" class="ft12 cl-main ftw600 text-over2">{{value.title}}</view>
							<view @tap="detail(value.id)" class="ft12 cl-notice ftw300 text-over2">{{value.title}}</view>
							<view @tap="detail(value.id)" class="flex alcenter space mt5 cl-notice">
								<view class="flex alcenter">
									<text class="ft14 cl-orange ftw600">¥{{value.money*1}}</text>
								</view>
								<view class="flex alcenter">
									<text class="ft12 text-line">¥{{value.money_primary*1}}</text>
								</view>
							</view>
							<view class="mt5 flex alend space">
								<uni-number-box
									class="step"
									style="position:static;"
									:min="0" 
									:max="value.stock"
									:value="value.cart_num"
									:isMax="value.stock>value.cart_num?false:true"
									:isMin="value.stock>0?false:true"
									:index="value.id"
									@eventChange="numberChange"
								></uni-number-box>
							</view>
						</view>
					</view>
					</block>
					<view class="text-center ft14" style="width: 100%; padding: 30upx; color: #ddd;">{{contentnomore}}</view>
			</view>
			<view class="t-list text-center" v-else>
				<view class="ft14" style="width: 100%; padding: 30upx; color: #ddd;">--没有数据--</view>
			</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				sizeCalcState: false,
				scrollTop: 0,
				old: {
				    scrollTop: 0
				},
				currentId: 0,
				flist: [],
				slist: [],
				tlist: [],
				rows:[],
				page:1,
				reload: false,
				contentnomore: '',
				cartList:[],
				index:1,
				TabCur: 0,
				scrollLeft: 0,
			}
		},
		onLoad(e){
			if(e.currentId){
				this.currentId=e.currentId
			}else{
				this.currentId=0;
			}
			this.page=1;
			//this.gwccount()
			this.getList();
			uni.setNavigationBarTitle({
			    title: '分类'
			});
		},
		onShow() {
			
		},
		onReachBottom() {
			this.page++
			this.shoplist();
		},
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url:'/pages/client/shop/list'
			})
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 80;
				this.rows=[];
				this.page=1
				this.shoplist();
			},
			getList() {
				if(!uni.getStorageSync("token")){
					uni.showToast({
						title:'请登录~',
						icon:'none'
					})
				}
				uni.showLoading({
				    title: '加载中'
				});
				let data = { };
				var limit=10;
				data.limit=limit
				data.offset=limit*this.page
				
				this.$ajax('post','cate/index',data).then(res=>{
					setTimeout(function() {
					    uni.hideLoading();  
					},300)
					this.flist=res.data;
					res.data.forEach((e,i)=>{
						if(e.id==this.currentId){
							this.tabtap(res.data[i],i)
						} 
					})
					let arr = res.data.find(e=>e.id==this.currentId)
					if(!arr){
						this.tabtap(0)
					} 
					
					if(res.data.length==0){
						this.contentnomore='--没有数据了--'
						this.reload= true
					}else{
						this.reload= false
					}
					// if(data.data.gwccount>0){
					// 	this.setTabBarBadges(data.data.gwccount)
					// }
					// this.loadData(data.data.shopmenu)
				})
			},
			setTabBarBadges(count){
				if(count>=99){
					count='99+'
				}
				if(count<=0){
					uni.removeTabBarBadge({
					  index: 2
					})
				}else{
					uni.setTabBarBadge({
					  index: 2,
					  text: ""+count+""
					})
				}
			},
			addgwc(sum,id){
				let this_=this
				let data = {};
				data.sku_id=id
				data.num=sum
				data.loding=false
				if(uni.getStorageSync("token")){ 
					this.$ajax('post','cart/newcart',data).then(e=>{
						this.$ajax('post','cart/num').then(res=>{
							uni.setTabBarBadge({
								index:2,
								text:String(res.data)
							})
						})
					})
				}else{
					uni.showModal({
						title: '温馨提示',
						content: '请先登后添加购物车',
						showCancel: true,
						confirmText: "确定",
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								
							}
						}
					});
					return false;
				}
			},
			//数量
			numberChange(data){
				//this.rows[data.index].number = data.number;
				console.log(data);
				this.addgwc(data.number,data.index)
				//this.calcTotal();
			},
			//计算总价
			calcTotal(){
				let list = this.cartList;
				if(list.length === 0){
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item=>{
					if(item.checked === true){
						total += item.price * item.number;
					}else if(checked === true){
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			async loadData(list){
				this.flist=[];
				list.forEach(item=>{
					if(!item.pid){
						this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
					}else if(!item.picture){
						this.slist.push(item); //没有图的是2级分类
					}else{
						this.tlist.push(item); //3级分类
					}
				}) 
			},
			
			tabtap(item,i){
				if(item==0){
					this.currentId = 0;
					this.TabCur = -1;
					this.scrollLeft= 0 ;
					this.page=1;
					this.reload= false;
				}else{
					this.slist=this.flist[i].list
					this.currentId = item.id;
					this.TabCur = -1;
					this.scrollLeft= 0 ;
					this.page=1;
					this.reload= false
				}
				this.rows=[];
				this.goTop()
				this.shoplist();
				console.log(item.id)
			},
			shoplist(){
				this.$ajax('post','cate/goods_list',{
					id:this.TabCur>-1?this.slist[this.TabCur].id:this.currentId ,
					page:this.page
				}).then(res=>{ 
					this.rows.push(...res.data)
				})
			},
			//右侧栏滚动
			asideScroll(e){
				if(!this.sizeCalcState){
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
				if(tabs.length > 0){
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(){
				let h = 0;
				this.slist.forEach(item=>{
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			navToList(sid, tid){
				uni.navigateTo({
					url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
				})
			},
			detail(id,lx){
				uni.navigateTo({
					url:'/pages/client/shop/product?id='+id
				})
			},
			scrolltolower(){
				this.page=this.page*1+1
				console.log(this.page);
				if(!this.reload){
					this.shoplist();
					
				}else{
					this.contentnomore='--没有数据了--'
				}
			},
			scroll: function(e) {
			        this.old.scrollTop = e.detail.scrollTop
			    },
			goTop: function(e) {
			    this.scrollTop = this.old.scrollTop
			    this.$nextTick(function() {
			        this.scrollTop = 0
			    });
			},
			
		}
	}
</script>

<style lang='scss'>
	.search{
		width: 100%;
		height: 70rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		view{
			background: #F0F0F0;
			width: 85%;
			border-radius: 35rpx;
			height: 100%;
			input{
				width: 100%;
				height: 100%;
			}
		} 
	}
	.nav .cu-item.cur {
		border-bottom: 4upx solid;
	}
	
	.nav .cu-item {
		height: 90upx;
		display: inline-block;
		line-height: 90upx;
		margin: 0 10upx;
		padding: 0 20upx;
	}
	.text-green{
		color: rgb(1, 183, 80);
	}
	.nav .cu-item.cur {
		border-bottom: 4upx solid;
	}
	.nav {
		background: #fff;
		white-space: nowrap;
	}
	page,
	.content {
		/* height: 100%; */
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		&.active{
			color: $base-color;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-top: 12upx;
		padding-right: 20upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 264upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 210upx;
			height: 210upx;
		}
	}
	.integral-mall-goods{
		width: 100%;
		background: #F2F2F2;
		border-radius: 16upx;
	}
	.integral-tuan-l{
		width: 200rpx;
		height: 200rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}
	.zhekou{
		background: rgba(0, 0, 0 ,0.2); 
		color: #ffffff; 
		position: absolute; 

		bottom: 25upx;
		left:26upx; 
		border-radius: 10upx;
		font-size: 20upx;
		width: 110upx; 
		height: 30upx; 
		z-index: 999;
	}
	.step{
		
		border-radius: 10upx;
		/* margin-right: 20upx; */
	}
</style>
